<template>
	<view class="" style="height: 1000px;">
		<view class="" v-for="(item,index) in list" :key="index">
			<view style="background:red;height:100rpx;width:100rpx;margin-top: 20px;margin-left: 400px;" @click="touchStart(index)" v-show="item.isshow"
			 :animation="animationData[index]"
			 >
				13211321
			</view>
			<<view class="div" @touchstart="touchStart">
			
			</view>
		</view>
		<view style="background:red;height:100rpx;width:100rpx;margin-top: 20px;" @touchstart="aa" @touchend="bb">
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list: [
					],
					animationData: {},
	
				}
			},
			onShow: function() {
	
	
	
	
	
			},
			onLoad(){
				var model={
							name: '1',
							isshow: true
						};
						this.list.push(model);
						var animation = uni.createAnimation({
							duration: 2000,
							timingFunction: 'ease',
						})
						this.animation = animation
						//  // 同时进行
						this.animation.translateX(-400).opacity(1).step();
						this.animationData[0] = animation.export()
						
						this.list.push(model);
						var animation = uni.createAnimation({
							duration: 2000,
							timingFunction: 'ease',
						})
						this.animation = animation
						//  // 同时进行
						this.animation.translateX(-400).opacity(1).step();
						this.animationData[1] = animation.export()
			},
			methods: {
				aa(e){
				console.log(e.touches[0]);	
				},
				bb(e){
					console.log(e.changedTouches[0]);
				},
				touchStart(index) {
					for (var i = 0; i < this.list.length; i++) {
						let a = {}
						a[i] = {}
						this.animationData = { ...this.animationData,
							...a
						}
					}
					var animation = uni.createAnimation({
						duration: 2000,
						timingFunction: 'ease',
					})
					this.animation = animation
					//  // 同时进行
					this.animation.translateX(400).opacity(0).step()
					this.animationData[index] = animation.export()
					 setTimeout(()=>{
						this.list.splice(index,1)
					 },1000)
				},
			
			}
		}
</script>


<style>
	.fixed {
		width: 100%;
		text-align: center;
	}

	.list {
		line-height: 100px;
		border: 1px red solid;
		height: 580px;
	}

	/* 搜索框 */
	.search-ico,
	.search-ico-1 {
		width: 40upx;
		height: 40upx;
	}

	.item-ico {
		width: 120upx;
		height: 120upx;
	}

	.search-text {
		font-size: 14px;
		background-color: #FFFFFF;
		height: 80upx;
		width: 600upx;
		margin-left: 10upx;
	}

	.search-block {
		display: flex;
		flex-direction: row;
		padding-left: 10upx;
		position: relative;

	}

	.search-ico-wapper {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 0upx 0upx 40upx;
		border-bottom-left-radius: 18px;
		border-top-left-radius: 18px;
	}

	.search-ico-wapper1 {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0upx 40upx 0upx 0upx;
		border-bottom-right-radius: 18px;
		border-top-right-radius: 18px;
	}

	.Item {
		overflow: hidden;
		border-radius: 16rpx;
		background: #fff;
		margin-left: 2%;
		width: 94%;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.ItemIcon {
		float: left;
		margin-left: 10rpx;
		height: 230rpx;
	}

	.item-text .span {
		display: inline-block;
		width: 56%;
		float: right;
		font-size: 27rpx;
	}

	.item-text .ispan {
		font-style: normal;
		width: 42%;
		display: inline-block;
		font-size: 27rpx;
	}

	.btg {
		padding-top: 5rpx;
		border: 1px #E6E6E6 solid;
		border-top: 0px #E6E6E6 solid;
		padding-bottom: 5rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	

	.btg .item-text .ispan {
		font-style: normal;
		width: 24%;
		display: inline-block;
		font-size: 25rpx;
		line-height: 50rpx;
	}

	.btg .item-text .tuspan {
		font-style: normal;
		display: inline-block;
		font-size: 25rpx;
		line-height: 50rpx;
		width: 50rpx;
		text-align: center;
		padding: 0 10rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
		border-radius: 8rpx;
		
	}
.btg .item-text .span {
		font-style: normal;
		width: 24%;
		display: inline-block;
		font-size: 25rpx;
		line-height: 50rpx;

	}
	.button {
		width: 140rpx;
		box-sizing: border-box;
		margin-right: 10rpx;
		border: none;
		border-radius: 8rpx !important;
		font-size: 27rpx;
		line-height: 50rpx;
		height: 50rpx;
		padding: .10rpx 0;
		background-color: #6D8AF9 !important;
		float: right;
	}

	

	.item-content {
		padding-left: 0;
	}

	.item-title .ispan {
		font-size: 27rpx;
		width: auto;
		height: auto;
	}

	.item-title {
		font-size: 40rpx;
		color: #454545;
		width: 100%;
		padding-left: .5rem;
	}

	.item-title-row {
		background-image: none;
		padding-right: 0px;
	}

	.item-link .item-inner {
		padding-right: 0;
		padding-left: .5rem;
		border: 1rpx #E6E6E6 solid;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}


	.page-content {
		padding-top: 0;

	}

	.item-text {
		font-size: 27rpx;
		color: #454545;
		margin: 20rpx 0;
		padding-left: 20rpx;
		line-height: 1.2;
	}

	.btext {
		font-weight: normal;
		color: #F79D63;
	}

	.scroll-view_H {
		white-space: nowrap;
		padding-top: 10rpx;

		transition:all 0.2s linear transform:translated3d(0, 0, 0) .scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 100px;
		}

		.uni-bg-red {
			background: red;
		}

		.uni-bg-green {
			background: green;
		}

		.uni-bg-blue {
			background: blue;
		}
	}
</style>
